<template>
    <Ckeditor :editor="editor" :config="editorConfig" v-model="richValue" @update:model-value="updateRichValue" class="edit-box" />
</template>

<script setup lang="ts">
import { onMounted, ref, watch } from 'vue'

import ResourceService from '@/api/resource'

import ClassicEditor from '@ckeditor/ckeditor5-build-classic'
import { Ckeditor } from '@ckeditor/ckeditor5-vue'

import { useI18n } from 'vue-i18n'
import type { SupportedLocales } from '@/locales/i18n'
import type { MessageSchema } from '@/types/i18n'

const props = defineProps({
    modelValue: {
        type: String,
        default: '',
    },
})
const { locale, t } = useI18n<{ message: MessageSchema }, SupportedLocales>()

const richValue = ref(props.modelValue)
const emit = defineEmits<{
    (e: 'update-richValue', value: string): void
}>()
const updateRichValue = (value: string) => {
    emit('update-richValue', value)
}

// 编辑器
const editor: any = ClassicEditor
const editorConfig = ref<any>({
    language: locale.value,
    toolbar: {
        items: ['heading', '|', 'bold', 'italic', '|', 'bulletedList', 'numberedList', '|', 'link', '|', 'imageUpload', '|', 'insertTable', '|', 'undo', 'redo'],
    },
    heading: {
        options: [
            { model: 'paragraph', title: t('rich_text_editor.head_1'), class: 'ck-heading_paragraph' },
            { model: 'heading1', view: 'h1', title: t('rich_text_editor.head_2'), class: 'ck-heading_heading1' },
            { model: 'heading2', view: 'h2', title: t('rich_text_editor.head_3'), class: 'ck-heading_heading2' },
            { model: 'heading3', view: 'h3', title: t('rich_text_editor.head_4'), class: 'ck-heading_heading3' },
            { model: 'heading4', view: 'h4', title: t('rich_text_editor.head_5'), class: 'ck-heading_heading4' },
            { model: 'heading5', view: 'h5', title: t('rich_text_editor.head_6'), class: 'ck-heading_heading5' },
            { model: 'heading6', view: 'h6', title: t('rich_text_editor.head_7'), class: 'ck-heading_heading6' },
        ],
    },
    image: {
        toolbar: ['imageTextAlternative', 'toggleImageCaption', 'imageStyle:inline', 'imageStyle:block', 'imageStyle:side'],
        upload: {
            types: ['jpeg', 'png', 'gif', 'bmp', 'webp'],
        },
    },
    // 自定义上传适配器
    extraPlugins: [customUploadAdapter],
})
// 自定义上传适配器
function customUploadAdapter(editor: any) {
    editor.plugins.get('FileRepository').createUploadAdapter = (loader: any) => {
        return {
            upload: () => {
                return new Promise((resolve, reject) => {
                    const formData = new FormData()
                    loader.file.then((file: File) => {
                        formData.append('file', file)
                        formData.append('type', 'image')
                        formData.append('filename', file.name)

                        ResourceService.upload(formData).then(res => {
                            resolve({
                                default: res.url, // 根据你的API实际返回结构调整
                            })
                        })
                    })
                })
            },
        }
    }
}

watch(
    () => props.modelValue,
    () => {
        richValue.value = props.modelValue
    },
)
</script>
